<template>
  <div>
    <template>
      <el-select v-model="value" placeholder="请选择" @change="changesubject()">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
    <div id="TestScore" :style="{ width: '1000px', height: '480px' }"></div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";

export default {
  data() {
    return {
      //学生成绩集合
      test_score: {},
      //班级平级成绩集合
      class_adv: {},
      //年级平均成绩集合
      grade_adv: {},
      //柱状图动态加入数据
      sources: [],
      //查看多少的数量

      options: [
        {
          value: "chinese",
          label: "语文成绩对比"
        },
        {
          value: "math",
          label: "数学成绩对比"
        },
        {
          value: "english",
          label: "英语成绩对比"
        },
        {
          value: "political",
          label: "政治成绩对比"
        },
        {
          value: "history",
          label: "历史成绩对比"
        },
        {
          value: "geographic",
          label: "地理成绩对比"
        },
        {
          value: "biological",
          label: "物理成绩对比"
        },
        {
          value: "physical",
          label: "化学成绩对比"
        },
        {
          value: "chemical",
          label: "生物成绩对比"
        },
        {
          value: "all",
          label: "总成绩对比"
        }
      ],
      value: ""
    };
  },
  methods: {
    findTestData() {
      axios
        .get(
          commons.baseUrl +
            "student/findTestData?level=" +
            this.$store.state.level +
            "&userid=" +
            this.$store.state.userid +
            "&c_id=" +
            this.$store.state.c_id
        )
        .then(res => {

          console.log(res);
          (this.test_score = res.data.test_score),
            (this.class_adv = res.data.class_adv),
            (this.grade_adv = res.data.grade_adv);
          this.drawChart();
        });
    },
    changesubject(value) {
      this.drawChart(value);
    },

    drawChart() {
      this.duixaiang(this.value);
      // 基于准备好的dom，初始化echarts实例
      let testScore = this.$echarts.init(document.getElementById("TestScore"));
      //指定图表的配置项和数据
      let option = {
        tooltip: {},
        legend: {},
        dataset: {
          dimensions: ["product", "自己", "班级平均", "年级平均"],
          source: this.sources
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
      };
      testScore.setOption(option);
    },
    duixaiang(val, index) {
      for (let i = 0; i < 5; i++) {
        if (val == "chinese") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].chinese,
            班级平均: this.class_adv[i].chinese_class_adv,
            年级平均: this.grade_adv[i].chinese_grade_adv
          };
        } else if (val == "math") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].math,
            班级平均: this.class_adv[i].math_class_adv,
            年级平均: this.grade_adv[i].math_grade_adv
          };
        } else if (val == "english") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].english,
            班级平均: this.class_adv[i].english_class_adv,
            年级平均: this.grade_adv[i].english_grade_adv
          };
        } else if (val == "political") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].political,
            班级平均: this.class_adv[i].political_class_adv,
            年级平均: this.grade_adv[i].political_grade_adv
          };
        } else if (val == "history") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].history,
            班级平均: this.class_adv[i].history_class_adv,
            年级平均: this.grade_adv[i].history_grade_adv
          };
        } else if (val == "geographic") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].geographic,
            班级平均: this.class_adv[i].geographic_class_adv,
            年级平均: this.grade_adv[i].geographic_grade_adv
          };
        } else if (val == "biological") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].biological,
            班级平均: this.class_adv[i].biological_class_adv,
            年级平均: this.grade_adv[i].biological_grade_adv
          };
        } else if (val == "physical") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].physical,
            班级平均: this.class_adv[i].physical_class_adv,
            年级平均: this.grade_adv[i].physical_grade_adv
          };
        } else if (val == "chemical") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].chemical,
            班级平均: this.class_adv[i].chemical_class_adv,
            年级平均: this.grade_adv[i].chemical_grade_adv
          };
        } else if (val == "all") {
          this.sources[i] = {
            product: this.test_score[i].type,
            自己: this.test_score[i].all,
            班级平均: this.class_adv[i].all_class_adv,
            年级平均: this.grade_adv[i].all_grade_adv
          };
        }
      }
    }
  },
  mounted() {
    this.value = "all";
    this.findTestData();
  }
};
</script>
<style scoped></style>
